<div class="px-3">

  <div class="grid grid-cols-2 gap-6 py-5 list-block">
    <div
      class="bd_all w-full min-h-[140px] p-5 flex flex-col flex-wrap items-center plugin-block hover:border-green-700 hover:shadow-lg transition-shadow duration-300"
      *ngFor="let it of renderList" (click)="clickExtension(it)">
      <div class="flex w-full">
        <div class="shrink-0 block w-[40px] h-[40px] rounded-lg bg-[length:90%] bg-center bg-no-repeat mr-[20px]"
          [ngClass]="{ 'bg-gray-100': it.logo }" [ngStyle]="{ 'background-image': 'url(' + (it.logo || '') + ')' }">
        </div>

        <div class="flex flex-col flex-auto">
          <span class="text-lg font-bold">{{ it.moduleName }}</span>
          <span class="my-2 text-gray-400">{{ it.author }}</span>
          <span class="my-1 text-gray-500 desc">{{ it.description }}</span>
        </div>
        <div>
          <span *ngIf="electron.isElectron ? extensionService.localExtensions.has(it.moduleID) : it.installed"
            class="p-1 text-xs text-green-700 border-green-700 rounded-sm  bd_all whitespace-nowrap" i18n>Installed</span>
        </div>
      </div>
    </div>
  </div>
</div>
